<template>
  <div id="app">
    <div
      id="registerImg"
      v-for="img in imageList"
      v-lazy:background-image="img"
    />
    <van-nav-bar
      title="注册/登录"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="maindeepbg"
    />
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image :src="require('./images/logo.png')" />
      </van-grid-item>
    </van-grid>
    <van-cell-group>
      <van-field v-model="phone" placeholder="请输入手机号" />
      <van-field v-model="password" placeholder="请输入密码" autofocus="true" />
    </van-cell-group>
  </div>
</template>

<script>
//引入背景图
import registerImg from "./images/registermaoxiong.png";
export default {
  data() {
    return {
      //背景图
      imageList: [registerImg],
      //手机号密码
      phone: "",
      password: "",
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
  },
};
</script>

<style scoped lang="less">
#app {
  #registerImg {
    width: 375px;
    height: 667px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1;
  }
  //头部导航栏
  /deep/ .van-nav-bar__content {
    height: 60px;
    .van-nav-bar__arrow,
    .van-nav-bar__text {
      color: wheat !important;
    }
    .van-nav-bar__title {
      color: white;
    }
  }
  // 输入框
  .van-cell-group {
    .van-cell {
      background: rgba(248, 238, 219, 0.6);
    }
    div:nth-child(1) {
      margin-bottom: 2px;
    }
  }
  /deep/ .van-field__body {
    input::-webkit-input-placeholder {
      /* placeholder颜色  */
      // color: rgb(155, 145, 145) !important;
    }
  }
  // 中间小图
  .van-grid-item {
    margin: 0 auto;
  }
}
</style>
